<template>
	<view class="page-body paround40">
		<!-- 存在安全卡 -->
		<block v-if="isOpenAccount&&bankcardList.length!=0">
			<view class="h2">我的银行卡</view>
			<block v-for="(item , idx) in bankcardList" :key="idx"> 
				<view class="bankcardbg" :style="'background-image:url('+item.bankbg+')'" >
					<view class="flex bank-msg">
						<view class="name"></view>
						<view class="tel" @click="unbind(item)">解绑 &gt;</view>
					</view>
					<view class="br">
						<text>****</text><text>****</text><text>****</text><text class="mantissa">{{item.mantissa}}</text>
					</view>
				</view>
			</block>
		</block>
		<!-- 已实名未绑卡 -->
		<block v-else>
			<view class="h2">银行卡</view>
			<view :style="{'height':winHeight}">
				<defalut type="3" flexend="true"></defalut>
				<view class="statetxt">当前仅支持绑定银行储蓄卡，信用卡不支持绑定；</view>
				<view class="button btn-go" @click="gobindcard">绑定银行卡</view>
			</view>
		</block>
	</view>
</template>

<script>
	var that;
	import {
	    mapState,
	    mapMutations
	} from 'vuex'	
	import {bankcon} from '@/common/js/bankcon.js';
	import defalut from '@/components/defalut.vue';
	export default{
		data(){
			return{
				isPopout:false,
				isOpenAccount:false,
				bankbg:"",
				winHeight:this.$store.state.winHeight/2-50-60+'px',
				username:"",
				idCardNum:"",
				isNextStep:false,
				bankcardList:[]
			}
		},
		computed:mapState({
			refresh(state){
				return state.refresh;
			}
		}),
		onLoad(options){
			that=this;
			this.isOpenAccount=options.isOpenAccount;
			if(options.isOpenAccount){
				this.getbindCard()
			}
		},
		onShow(options){
			if(this.isOpenAccount){
				this.getbindCard()
			}
		},
		methods:{
			unbind(card){
				// this.isPopout=true;
				let encard = encodeURIComponent(JSON.stringify(card))
				uni.navigateTo({
					url:"/pages/user/bank/unbindcard?card="+encard
				})
			},
			besure(){
				this.isPopout=false
				uni.navigateTo({
					url:"/pages/user/bank/unbindcard"
				})
			},
			close(){
				this.isPopout=false
			},
			updateTel(){
				uni.navigateTo({
					url:"/pages/user/bank/undateTel"
				})
			},
			getbindCard(){//获取已绑定列表
				this.$https.POST({
					url:'/pay/lianlianBindcard',
					data:{
					},
					success(res){
						let bankcardList = res.data;
						bankcardList.forEach((card,index)=>{
							card.bankobj = bankcon.find((item,ii)=>{
								return card.linked_name == item.name;
							})
							if(!card.bankobj){
								card.bankobj = {}
								card.bankobj.imgurl="/static/img/bank/abc-bg.png";
							}
							card.bankbg =card.bankobj.imgurl;
							card.mantissa = card.linked_acctno.slice(-4);
						})
						that.bankcardList = bankcardList
					}
				})
				
			},
			gobindcard(){
				uni.redirectTo({
					url:"/pages/user/SAM/openaccount/openaccount"
				})
				// if(!this.isOpenAccount){
				// 	uni.showModal({
				// 		content:"您还未开通支付账户，请先开通支付账户",
				// 		success(res) {
				// 			if(res.confirm){
				// 				
				// 			}
				// 		}
				// 	})
				// 	return false;
				// }
			},
		},
		onShow(options){
			
		},
		onNavigationBarButtonTap(e){
			// console.log(e)
			uni.navigateTo({
				url:"/pages/user/bank/bindcard"
			})
		},
		components:{
			defalut
		},
		watch:{
			refresh(newValue,oldValue){
				console.log('refresh')
				if(newValue){
					that.getbindCard()
				}
			}
		}
	}
	function checkIdCard(code){
		var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
		var tip = "";
		var pass = true;
		console.log(code.length)
		if (code.length != 18) {
			tip = "仅支持二代身份证";
			pass = false;
		}else if(!city[code.substr(0,2)]){
			tip = "身份证号码错误";
			pass = false;
		}
		if(!pass){
			return tip;
		}else{
			return pass;
		}
	}
</script>

<style lang="scss" scoped="">
	@import '../../../static/css/user.css';
	.textcode{border-bottom: 1px solid #e9e9e9;height:112upx;}
	.bankcardbg{
		width: 670upx;height: 260upx; padding:26upx 35upx; color: rgba(255,255,255,.8); box-sizing: border-box; margin-bottom: 20upx;
		background:no-repeat left top/670upx 260upx;background-size:670upx 260upx; position:relative;
		.bank-msg{
			justify-content:space-between; height:72upx; 
			image{width: 70upx;height: 70upx;}
			.name{font-size:32upx;margin-left:5upx ;}
			.tel{font-size: 26upx;}
		}
		.br{position: absolute;right: 35upx;bottom: 16upx;
			.mantissa{font-size: 60upx;position: relative;bottom: 4upx;padding-right: 0;}
			text{font-size: 44upx;padding-right:25upx;}
		}
	}
	.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			text-align: center;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 32upx;text-align: center;font-weight: bold;}
		.p{font-size: 24upx;color: #a9b0c0;line-height: 32upx;padding-top: 10upx;padding: 0 20upx;}
		.h6{font-weight: bold;color: #ff7202;padding-top:10upx;font-size: 28upx;}
		.btn-row-more{
			padding: 0;border-top: 1px solid $border-color; margin-top:35upx; font-size: 32upx;;
			.btn{height: 88upx;line-height: 88upx;text-align: center;color: #a9b0c0;}
			.btn:nth-of-type(1){border-right: 1px solid $border-color;color: #007aff;}
		}
	}
	.state.fadein{
		opacity: 1;z-index: 10;
	}
	.btn-go{background: $linear-color;width: 360upx;margin: 0 auto;}
	.btn-out{border:1px solid #E6E6E6;color: #0e1327;border-radius: 44upx;margin-top: 60upx;font-size: 32upx;}
	.statetxt{color:#A3AAB8;line-height: 46upx;width:572upx; margin:20upx auto 52upx;}
	.btn-next{margin-top: 70upx;}
</style>
